Hi ha diferents conceptes que hem de començar a controlar pel que fa la sintaxis de CSS.
Un selector d'etiqueta és un element en el qual hi aplicarem estils. Hi ha diferents tipus de selectors que els estudiarem més endavant. Quan hem posat el selector, obrim i tanquem les claus.
selector {
}
La propietat és l'estil que volem canviar a aquell element. No hi ha limit de propietats que podem assignar a un element. Heu de posar les que necessiteu per aconseguir l'estil que busqueu.
selector {
propietat1:
propietat2:
propietat3:
}
El valor de la propietat és el paràmetre que agafa aquella propietat que volem modificar.
selector {
propietat1:valor;
propietat2:valor;
propietat3:valor;
}
Una declaració és el conjunt de propietat+valor. Un bloc de declaració conté una o més declaracions. Les declaracions van separades per punt i coma. És molt important que no us deixeu el punt i coma.
selector {
declaració1;
declaració2;
declaració3;
}
selector {
bloc;
de;
declaració;
}
Sapigueu que en la última declaració del bloc, el punt i coma no és necessari.
selector {
declaració1;
declaració2;
declaració3
}
Millor que agafeu el costum de posar punt i coma al final de cada declaració.
Una regla de CSS és el conjunt de selector + un bloc de declaració. Poden haver-hi una o diverses regles CSS en un full d'estils.
En la documentació de W3Schoolsteniu més informació sobre la sintaxis de CSS.
Els comentaris en CSS s'utilitzen per explicar el codi i són molts útils quan heu de modificar el codi en dates ulteriors. Els comentaris són ignorats pels navegadors.
S'utilitzen de diferent manera, com ara sobre una regla
/* This is a single-line comment */
p {
color: red;
}
al costat d'una declaració
p {
color: red; /* Set text color to red */
}
en multilínia
/* This is
a multi-line
comment */
p {
color: red;
}
Hem de dominar la combinació de tipus de comentaris en un fitxer html
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red; /* Set text color to red */
}
</style>
</head>
<body>
<h2>My Heading
<!-- These paragraphs will be red -->
<p>Hello World!
<p>This paragraph is styled with CSS.
<p>CSS comments are not shown in the output.
</body>
</html>